<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>使用CSS实现折叠面板</title>
	<style type="text/css">
	body{margin: 0;padding: 0;}
	.container{width:40%;margin:auto;margin-top:40px;padding: 10px;background-color: #fff;border:1px solid #e0e0e0;border-radius: 4px;}
	.item-panel{overflow:hidden;margin-bottom:10px;border:1px solid #e0e0e0;border-radius:4px;}
	.three{margin: 0;}
	.panel-head{width:100%;background-color: #f5f5f5;border-bottom:1px solid #e0e0e0;padding: 5px;font-size: 18px;font-weight:bold;cursor:pointer;display: block;box-sizing: border-box;}
	.panel-control{display: none;}
	.panel-content{overflow: hidden;height: 0;transition:height .5s;}
	.panel-control:checked + .panel-content{height: 100px;}
	p{padding: 15px 10px;margin: 0;}
	</style>
</head>
<body>
	<section class="container">
		<div class="item-panel">
			<label href="#" for="item1" class="panel-head">
				collapsible group item #1
			</label>
			<input type="checkbox" name="item" id="item1" class="panel-control">
			<div class="panel-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error consequatur, veniam ipsa perspiciatis at aspernatur sit saepe possimus architecto praesentium cumque, ducimus? Possimus tenetur hic magni porro, quisquam, debitis ea!
				</p>
			</div>
		</div>
		<div class="item-panel">
			<label href="#" for="item2" class="panel-head">
				collapsible group item #2
			</label>
			<input type="checkbox" name="item" id="item2" class="panel-control">
			<div class="panel-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error consequatur, veniam ipsa perspiciatis at aspernatur sit saepe possimus architecto praesentium cumque, ducimus? Possimus tenetur hic magni porro, quisquam, debitis ea!
				</p>
			</div>
		</div>
		<div class="item-panel three">
			<label href="#" for="item3" class="panel-head">
				collapsible group item #3
			</label>
			<input type="checkbox" name="item" id="item3" class="panel-control">
			<div class="panel-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error consequatur, veniam ipsa perspiciatis at aspernatur sit saepe possimus architecto praesentium cumque, ducimus? Possimus tenetur hic magni porro, quisquam, debitis ea!
				</p>
			</div>
		</div>
	</section>
</body>
</html>